<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mr. Zhang's Blog</title>
    <link href="z.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
         <style type="text/css">
             /* 对某个动画名称设置一个周期的时间，缺点就是这个只能对单一某个动画进行设置 */
            .animate__pulse {
                  --animate-duration: 5s;
                  --animate-delay: 5.9s;
            }
            
            /* 将所有的动画设置动画时间*/
            :root {
              --animate-duration: 2000ms;                           
            }
            /*直接调用关键帧名称*/
            p{            
                animation-name:jello ;
                animation-duration: 2s;
                animation-delay: 1.5s;
            }
         </style>
    <script>
    function $(id){
    return document.getElementById(id);
    }
    <!--跳转-->
    function jump_one(){
    window.location.href="g.html";
    }
    </script>
</head>
<body>
<!--顶部-->
<div id="top">
    <!--标题-->
    <div class="title">Welcome to the mood!</div>
    <!--导航栏-->
    <div class="whole">
        <li class="father"><a href="#" onclick="jump_one();">主页</a></li>
        <li class="father"><a href="#">动态</a>
            <ul class="son">
                <li>family</li>
                <li>friend</li>
                <li>student</li>
            </ul>
        </li>
        <li class="father"><a href="#">消息</a>
            <ul class="son">
                <li>family</li>
                <li>friend</li>
                <li>student</li>
            </ul>
        </li>
        <li class="father"><a href="#">足迹</a></li>
        <li class="father"><a href="#">留言</a></li>
    </div>
</div>
<!--中间-->
<div id="middle">
    <div class="box1">
        <h4>公告 : 心情日记本mood已上线,快来瞧瞧吧!</h4>
    </div>
    <div class="box2">
        <div class="text">
            <h4>关于介绍 : </h4>
            <br/>
            <p>一天一天累积你的感情。</p>
            <p>最简单最可爱地记录我感情地方法。</p>
            <p>从我心里出来，和我面对面的时间。</p>
            <br/>
            <h4>功能分区 : </h4>
            <br/>
            <p>尝试着记录今天的感情。</p>
            <p>不想留下的感情，一定要忘记。</p>
            <p>摇一摇。按照感情分类，收集起来。</p>
            <p>想分享的感情，分享出去。</p>
            <br/>
            <h4>每日新闻 : </h4>
            <br/>
            <p>
                指纹解锁和数字密码解锁哪个更安全？那么我可以告诉你当然是数字密码锁更安全，因为你只需要知道一点，指纹解锁是被动的，而密码解锁是必须要主动的。</p>
            <br/>
            <h4>版本记录</h4>
            <br/>
            <p>版本 : 无限制</p>
            <br/>
            <h4>黑夜模式</h4>
            <br/>
            <p>1 : 桌面组件</p>
            <p>2 : 通知提醒</p>
            <p>3 : 节日模式</p>
            <p>中文名 : MOOD</p>
            <p>包名 : 无</p>
            <p>MD5值 : 无</p>
        </div>
    </div>
    <div class="my">
        <div class="box3">
            <img class="head-portrait" src="image/2头像.jpg"/>
            <h3 class="name">举歌栗子</h3>
            <div class="line"></div>
            <table>
                <tr>
                    <td>文章</td>
                    <td>分类</td>
                    <td>标签</td>
                </tr>
                <tr>
                    <td>无</td>
                    <td>无</td>
                    <td>无</td>
                </tr>
            </table>
            <button>加入书签</button>
        </div>
        <div class="box4">
            <div class="1">Swing</div>
            <div id="rotate-div">Swing</div>
            <div id="font">
                <p>number</p>
        <h1 class="animate__animated animate__pulse">one</h1>
        <h1 class="animate__animated animate__heartBeat">Two</h1>
        <h1 class="animate__animated animate__jello">Three</h1>
            </div>
        </div>
 <div class="box5">
            
        </div>
    </div>
</div> 
</body>
</html>